<template>
    <div class="films-box">
        <div class="list-name">
            <span>{{ title }}</span>
        </div>
        <FilmList class="content-list" :list="products" />
        <input type="button" value="加载下一页" @click="loadOtheDatas()" />
    </div>
</template>
<script>
import FilmList from "../components/FilmList.vue";
export default {
    data() {
        return {
            products: [],
            dataFlag: true,
            params: {
                size: 9,
                no: 1,
                // typeId:"",
            },
            title:"",
        };
    },
    components: {
        FilmList
    },
    watch:{
        "$route.query.wk":function(nv){
            // console.log("Wk发生了变化",nv)
            this.products = [];
            this.params.seach = nv;
            this.loadFilmList();
        }
    },
    methods: {
        loadFilmList() {
            if(!this.dataFlag){
                this.$showTip("没有更多数据了")
                return;
            }
            this.$api.loadFilms(this.params)
                .then((data)=>{
                    this.products = this.products.concat(data);
                    // console.log(data)
                }).catch(this.$error);
        },
        loadOtheDatas() {
            if (!this.dataFlag) {
                this.$showTip("没有更多数据了");
                return;
            } 
            this.params.no += 1;
            this.loadFilmList();
        }
    },
    mounted() {
        // 再生命周期钩子函数中执行初始化请求操作
        // this.params.typeId = this.$route.query.typeId;
        // this.title = this.$route.query.title;
        if(this.$route.query.typeId){
            this.params.typeId = this.$route.query.typeId;
        }
        if(this.$route.query.wk){
            this.params.seach = this.$route.query.wk;
        }
        this.loadFilmList();
    }
};
</script>
<style lang="less" scope>
.films-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.content-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    width: 100%;
    font-size: 0rem;
    > * {
        margin-top: 0.2rem;
    }
}
</style>